<template>
	<avue-crud ref="crud" :option="option" :data="data" @row-update="addUpdate" @row-click="handleRowClick">
	  <template slot="age" slot-scope="{row}">
	   <el-tag>{{row.age}}</el-tag>
	  </template>
	   <template slot="ageForm" slot-scope="{row,disabled}">
	     自定义:<el-input v-model="row.age" :disabled="disabled"></el-input>
	  </template>
	  <template slot="menuLeft">
	    <el-button @click="addRow" size="small">添加10条</el-button>
	  </template>
	   <template slot="menu" slot-scope="{row,index,size,type}">
	    <el-button @click="addBreakRow(index)" :size="size" :type="type">向上添加</el-button>
	    <el-button @click="addNextRow(index)" :size="size" :type="type">向下添加</el-button>
	  </template>
	</avue-crud>
</template>

<script>
	export default {
	  data(){
	    return {
	       data:[{
	          id:0,
	          sex:1,
	          age:18,
	          $cellEdit:true
	       },{
	          id:1,
	          name:'李四',
	          age:18,
	          sex:0,
	       }],
	       option:{
	        addBtn:false,
	        addRowBtn:true,
	        cellBtn:true,
	        menuWidth:250,
	        column: [{
	            label:'姓名',
	            prop: 'name',
	            cell: true,
	            rules: [
	              {
	                required: true,
	                message: '请输入姓名',
	                trigger: 'blur'
	              }
	            ]
	        },{
	            label:'性别',
	            prop: 'sex',
	            type:'select',
	            dicData:[{
	              label:'男',
	              value:0
	            },{
	              label:'女',
	              value:1
	            }],
	            cell: true
	        },{
	            label:'年龄',
	            prop: 'age',
	            slot:true,
	            formslot:true,
	            dicData:[{
	              label:'男',
	              value:0
	            },{
	              label:'女',
	              value:1
	            }],
	            rules: [
	              {
	                required: true,
	                message: '请输入年龄',
	                trigger: 'blur'
	              }
	            ],
	            cell: true
	          },{
	            label:'开关',
	            prop: 'switch',
	            type:'switch',
	            cell: true
	        }]
	      }
	    }
	  },
	  methods:{
	    addUpdate(form,index,done,loading){
	      this.$message.success('模拟网络请求')
	      setTimeout(() => {
	        this.$message.success('关闭按钮等待')
	        loading()
	      }, 1000)
	      setTimeout(() => {
	        this.$message.success(
	          '编辑数据' + JSON.stringify(form) + '数据序号' + index
	        )
	        done()
	      }, 2000)
	    },
	    addRow() {
	      this.$message.success('正在添加，请稍后')
	      setTimeout(() => {
	        for (let i = 0; i < 10; i++) {
	          this.$refs.crud.rowCellAdd({
	            name: '',
	          });
	        }
	      }, 500)
	    },
	    addNextRow(index){
	      this.data.splice(index+1,0,{
	        $cellEdit:true
	      })
	    },
	    addBreakRow(index){
	      this.data.splice(index==0?0:(index-1),0,{
	         $cellEdit:true
	      })
	    },
	    handleRowClick(row, event, column) {
	        this.$message({
	          showClose: true,
	          message: '序号' + row.$index,
	          type: 'success',
	        });
	      }
	  }
	}
</script>

<style>
</style>
